<template>
	<div>
		<el-form :model="form" :rules="rules" label-position="right" ref="form" label-width="160px">
			
			<el-form-item label="文件标题：" prop="title">
				<el-col :span="8">
					<el-input v-model="form.title" placeholder="请输入文件标题"></el-input>
				</el-col>
			</el-form-item>
			
			<el-form-item label="所属分类：" prop="cdc_cbcid">
				<el-col :span="8">
					<el-select style v-model="form.cdc_cbcid" placeholder="请选择所属分类">
						<el-option v-for="item in addDownloadFileData" :key="item.cdc_id" :label="item.cdc_name" :value="item.cdc_id"></el-option>
					</el-select>
				</el-col>
			</el-form-item>
			
			<el-form-item label="文件描述：" prop="describe">
				<el-col :span="8">
					<el-input type="textarea" v-model="form.describe" rows="5" placeholder="请输入文件描述"></el-input>
				</el-col>
			</el-form-item>
			
			<el-form-item label="文件地址：" prop="url">
				<el-col :span="8">
					<upload-file :fileName="form.url_name" v-on:uploadFileChange="uploadFileChange"></upload-file>
				</el-col>
			</el-form-item>
			
			<el-form-item>
				<el-button type="primary" @click="submitForm('form')">提交</el-button>
				<el-button @click="resetForm">重置</el-button>
			</el-form-item>
			
		</el-form>
	</div>
</template>

<script>
	import { mapState, mapMutations } from "vuex";
	export default {
		//数据源
		data() {
			return {
                //验证规则
                rules: {
                    title: [
                        {required: true, message: '请输入文件标题', trigger: 'blur'}
                    ],
                    cdc_cbcid: [
                        {required: true, message: '请选择所属分类', trigger: 'blur'}
                    ],
                    describe: [
                        {required: true, message: '请输入文件描述', trigger: 'blur'}
                    ],
                    url: [
                        {required: true, message: '请上传文件', trigger: 'blur'}
                    ],
                },
  				uploadFile: "",
			};
		},
		//初始化函数
		mounted() {
			//获取广告分类信息
			this.getaddDownloadFile();
		},
		//计算属性
		computed: {
			...mapState({
				form: state => state.addDownloadFileModule.form,
				addDownloadFileData: state => state.addDownloadFileModule.addDownloadFileData
			})
		},
		//组件方法
		methods: {
			getaddDownloadFile() {
				this.$myLoading.startLoading();
				this.$http.getHttp(
					this.$API.cmsDownloadCategorySearch + "/skip/0/limit/1000/cdc_is_delete/0",
					rs => {
						this.$myLoading.endLoading();
						this.$store.commit("addDownloadFileModule/updateaddDownloadFileData", rs.data);
					}
				);
			},
		    uploadFileChange(e) {
				this.$myLoading.startLoading();
		    	var fileObj = e.target.files[0];
		      
				this.$http.Aliyun_uploadFileHttp(fileObj, rsUrl => {
					var tempObj = fileObj.name.split('.');
					this.$myLoading.endLoading();
					
					this.form.url = rsUrl;
					this.form.size = parseInt(fileObj.size/1000);
					this.form.format = tempObj[tempObj.length-1];
					
		        	this.form.url_name = fileObj.name;
				});
		    },
			submitForm(form) {
				this.$refs[form].validate(valid => {
					if(valid) {
						var params = {
							cdl_title: this.form.title,
							cdl_cdcid: this.form.cdc_cbcid,
							cdl_describe: this.form.describe,
							cdl_describe: this.form.describe,
							cdl_url: this.form.url,
							cdl_size: this.form.size,
							cdl_format: this.form.format,
							cdl_create_time: this.$common.currentTime()
						};

						this.$myLoading.startLoading();
						this.$http.postHttp(this.$API.cmsDownloadLibraryAdd, params, rs => {
							this.$myLoading.endLoading();
							this.$myPop.SuccessMessage();
							this.resetForm();
						});
					}

				});
			},
			resetForm() {
				this.$store.commit("addDownloadFileModule/clearForm");
			}
		}
	};
</script>

<style lang="stylus" scoped>
	@import '~PUBLIC_CSS';
</style>